<template>
	<view class="container">
		<!-- 头部轮播 -->
		<view class="content-box">
			<scroll-view scroll-y lower-threshold="50" @scrolltolower="scrolltolower" :style="'height:'+scrollHeight+'px'">
				<view class="swiper-box">
					<swiper :autoplay="false" interval="3000" duration="500" class="carousel" circular @change="swiperChange">
						<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item" @click="navToWebview(item.link)">
							<view :style="'background-image:url('+item.image+')'" class="img-box"></view>
						</swiper-item>
					</swiper>
					<view class="swiper-dots">
						<text class="num">{{swiperCurrent+1}}</text>
						<text class="sign">/</text>
						<text class="num">{{swiperLength}}</text>
					</view>
				</view>
				<view class="title-text">政策解读</view>
				<view class="news-list">
					<view class="news-item" v-for="item in newsList"  @click="navToDetailPage(item.id)">
						<view class="news-img" :style="'background-image:url('+item.banner+')'"></view>
						<view class="text-box">
							<view class="title">{{item.title}}</view>
							<view class="intro">{{item.intro}}</view>
						</view>
					</view>
				</view>
				<view class="footer-cont">
					<footer-cont></footer-cont>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import footerCont from '@/components/footer-module.vue'
	export default {
		components: {
			footerCont
		},
		data() {
			return {
				carouselList: [],
				newsList:[],
				swiperCurrent:0,
				swiperLength:0,
				page:1,
				scrollHeight:'',
				isLoad:true,
			};
		},
		onShow() {
			
		},
		onLoad(options) {
			const that = this
			this.scrollHeight = uni.getSystemInfoSync().windowHeight
			this.loadData()
		},
		onShareAppMessage() {
			const that = this
			return {
				title: '秋歌体验田',
				imageUrl: 'http://shopmalling-asset.oss-cn-hangzhou.aliyuncs.com/share_bg.jpg',
				path: '/pages/index/index'
			}
		},
		methods: {
			async loadData() {
				const that = this
				that.loadStatus = 'loading'
				that.$api.request('news', 'roundRobinBanner', failres => {
					that.$api.msg(failres.errmsg)
				}).then(res => {
					let data = res.data
					data = JSON.parse(data)
					that.carouselList = JSON.parse(data.banner)
					that.swiperLength = that.carouselList.length
				})
				this.getNewsList()
			},
			//详情页
			navToDetailPage(id) {
				uni.navigateTo({
					url: `/pages/enterprise/zhengcedetail?id=${id}`
				})
			},
			getNewsList(){
				const that = this
				that.$api.request('news', 'list',{page:that.page,category:'2'}, failres => {
					that.$api.msg(failres.errmsg)
				}).then(res => {
					let data = res.data.items
					let arr = that.newsList
					if(data.length > 0){
						that.isLoad = true
					}
					data.forEach(item => {
						arr.push(item)
					})
					that.newsList = arr
				})
			},
			//轮播图切换
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
			},
			scrolltolower(e){
				if(this.isLoad){
					this.isLoad = false
					let page = this.page;
					this.page = page+1
					this.getNewsList()
				}
			},
			navToWebview(url){
				if(url){
					uni.navigateTo({
						url: `/pages/webview/index?url=${url}`
					})
				}
			}
		},
	}
</script>

<style lang="less">
	@import 'commonStyle.less';
	.container{
		position: relative;
		padding-bottom:30upx;
	}
	.swiper-box{
		position: relative;
		width: 100%;
		swiper{
			height:398upx;
		}
		.img-box{
			width: 100%;
			height: 100%;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
		}
	}
	.footer-cont{
		margin: 54upx 40upx 40upx 40upx;
		box-shadow:0px 3upx 29upx 0px rgba(196, 196, 196, 0.35);
	}
	.title-text{
		padding:37upx 0 0 40upx;
		font-size: 48upx;
		color: #333333;
		font-weight: bold;
	}
	.news-list{
		margin: 33upx 40upx 0 40upx;
		.news-item{
			display: flex;
			align-items: center;
			padding-bottom: 30upx;
			.text-box{
				flex-grow: 1;
				overflow: hidden;
			}
			.news-img{
				width:276upx;
				height:186upx;
				margin-right: 24upx;
				border-radius: 20upx;
				flex-shrink: 0;
				background-position: center;
				background-repeat: no-repeat;
				background-size: cover;
			}
			.title{
				font-size: 30upx;
				color: #333333;
				font-weight: bold;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.intro{
				margin-top: 24upx;
				font-size: 24upx;
				color: #666666;
				line-height: 40upx;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			&:not(:first-child){
				margin-top: 23upx;
			}
			&:not(:last-child){
				border-bottom: 10upx solid #F9F9F9;
			}
		}
	}
</style>
